<template>
  <div id="container">
    <div class="column-header">
        <span style="margin-left: 50px;color: #515a6e;cursor: pointer">
          建筑：{{ buildingName }}
        </span>
      <div class="btns">
        <a-select
            ref="select"
            :value="buildingCode"
            :disabled="historyLoading"
            style="height:40px;background:transparent;margin-right: 30px"
            @change="buildingChange">
          <a-select-option v-for="(building) in buildings" v-bind:key="building.code" :value="building.code">
            {{
              building.name
            }}
          </a-select-option>
        </a-select>
        <!--楼层选择-->
        <a-select
            ref="select"
            :value="floor.name"
            :disabled="historyLoading"
            style="width: 100px;height:40px;background:transparent;margin-right: 30px"
            @change="handleChange">
          <a-select-option v-for="(floorItem) in floors" v-bind:key="floorItem.id" :value="floorItem.id">
            {{
              floorItem.name
            }}
          </a-select-option>
        </a-select>
        <a-popover placement="bottom"
                   trigger="click"
                   v-model="historyVisible"
                   style="margin-right: 50px;width: 450px;">
          <template #content>
            <!--模式-->
            <div style="width: 450px;">
              <span>模式：</span>
              <a-radio-group v-model="checkPattern"
                             :options="patterns"
                             button-style="solid"
                             :disabled="historyLoading"
                             @change="patternChange"/>
            </div>
            <br>
            <!-- 模式为历史时显示-筛选条件-->
            <div v-if="currentPattern===1">
              <div>
                <span>性别：</span>
                <a-checkbox-group v-model="checkGender" :options="genders"/>
              </div>
              <br/>
              <div>
                <span>年龄：</span>
                <a-checkbox-group v-model="checkAge" :options="ages"/>
              </div>
              <br>
              <div>
                <div style="color: #1d293e;">
                  已选日期: {{ time.format('YYYY-MM-DD') }}
                </div>
                <a-calendar :fullscreen="false" :value="time" @select="onSelect" @panelChange="onPanelChange"/>
              </div>
            </div>
            <div class="confirm-btn">
              <a-button
                  type="primary"
                  size="small"
                  style="margin-top: 20px;"
                  @click="searchHistoryData"
                  :loading="historyLoading"> 确定
              </a-button>
            </div>
          </template>
          <div class="params">
            <!-- 模式-->
            <span>
              {{ checkPattern === 0 ? '实时' : '历史' }}&emsp;
            </span>
            <template v-if="currentPattern===1">
              <!--性别-->
              <span v-for="(genderIem,index) in selectGender" v-bind:key="genderIem === 0 ? '男' : '女'">
              {{ genderIem === 0 ? '男' : '女' }}{{ selectGender.length - 1 > index ? '/' : '&emsp;' }}
            </span>
              <!--年龄-->
              <span v-for="(ageItem,index) in selectAge" v-bind:key="getAge(ageItem)">
              {{ getAge(ageItem) }}{{ selectAge.length - 1 > index ? '/' : '&emsp;' }}
            </span>
              <!--时间-->
              <span>
              {{ selectTime.format('YYYY-MM-DD') }}
            </span>
            </template>
          </div>
        </a-popover>
      </div>
    </div>
    <div ref="mapContainer" class="content"></div>
    <div id="shop-information" v-if="showShopInformation">
      <a-icon type="close" @click="hideShopInfo" style="cursor: pointer;"/>
      <a-tabs default-active-key="1" style="position: relative">
        <a-tab-pane key="1" tab="商铺客流">
          <a-row :gutter="[15,15]">
            <a-col :span="24">
              <span>人数：</span><span>{{ passengerFlow.peopleNumber }}</span>
            </a-col>
            <a-col :span="24">
              <span>人次：</span><span>{{ passengerFlow.personTime }}</span>
            </a-col>
            <a-col :span="24">
              <span>过店：</span><span>{{ passengerFlow.crossShop }}</span>
            </a-col>
            <a-col :span="24">
              <span>男：</span><span>{{ passengerFlow.boy }}</span>
            </a-col>
            <a-col :span="24">
              <span>女：</span><span>{{ passengerFlow.girl }}</span>
            </a-col>
            <a-col :span="24">
              <span>滞留量：</span><span>{{ passengerFlow.retention }}</span>
            </a-col>
            <a-col :span="24">
              <span>平均驻留时长：</span><span>{{ passengerFlow.averageDwellTime }}</span>
            </a-col>
          </a-row>
        </a-tab-pane>
        <a-tab-pane key="2" tab="商铺信息" force-render>
          <a-row :gutter="[10,10]">
            <a-col :span="24">
              <span>店铺名称：</span><span>{{ shopInformation.shopName }}</span>
            </a-col>
            <a-col :span="24">
              <span>商铺编码：</span><span>{{ shopInformation.shopCode }}</span>
            </a-col>
            <a-col :span="24">
              <span>业态：</span><span>{{ shopInformation.shopFormat }}</span>
            </a-col>
            <a-col :span="24">
              <span>面积：</span><span>{{ shopInformation.measureArea }}</span>
            </a-col>
            <a-col :span="24">
              <span>租期起始日期：</span><span>{{ shopInformation.startTime }}</span>
            </a-col>
            <a-col :span="24">
              <span>租期结束日期：</span><span>{{ shopInformation.endTime }}</span>
            </a-col>
          </a-row>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import * as zymap from '../zymap.min.js'
import {METHOD, request} from "@/utils/request";
import {ERECT, HISTORY_MAP, INIT_MAP, MAP_INFORMATION} from "@/services/api";
import {SHOP_FLOW, SHOP_INFO} from "../services/api";

export default {
  name: "routeMap",
  data() {
    return {
      demo: -1,
      historyLoading: false,//查看历史loading
      ws: null,//长链接
      zymap: null,
      pointData: [],//路径
      pointLines: [],//路径实例
      userColors: [],//用户路径使用的颜色
      currentPattern: 0,//当前模式，0-，1-历史
      time: undefined,//时间
      selectTime: undefined,
      buildingName: '',//建筑名称
      floors: [],//楼层
      floor: {},//默认楼层
      buildingCode: '0001-0002-0002',
      buildings: [
        {
          code: '0001-0002-0002',
          name: '泉州中骏世界城'
        },
        {
          code: '2021',
          name: '正大广场'
        }
      ],
      genders: [{
        label: '男', value: 0
      }, {
        label: '女', value: 1
      }],//性别
      ages: [{
        label: '少年', value: 0
      }, {
        label: '青年', value: 1
      }, {
        label: '资深青年', value: 2
      }, {
        label: '中年', value: 3
      }, {
        label: '老年', value: 4
      }],//年纪
      patterns: [{
        label: '实时', value: 0
      }, {
        label: '历史', value: 1
      }],//模式
      checkGender: [0, 1],//已选性别
      selectGender: [0, 1],
      checkAge: [0, 1, 2, 3, 4],//已选年纪
      selectAge: [0, 1, 2, 3, 4],
      checkPattern: 0,//已选模式
      lastDataId: '0',//历史数据查询参数
      lastTime: '',//历史数据查询参数
      ageType: [
        {min: 0, max: 20},
        {min: 21, max: 25},
        {min: 26, max: 35},
        {min: 35, max: 45},
        {min: 46, max: 100}
      ],
      timeColors: ['#ff4d4f', '#ff7a45', '#40a9ff', '#36cfc9', '#9254de', '#520339', '#9254de'],//时间段颜色
      colors: {
        boy: ['#ff4d4f', '#ff7a45', '#40a9ff', '#36cfc9', '#9254de'],
        girl: ['#f759ab', '#ff9c6e', '#85a5ff', '#5cdbd3', '#73d13d'],
        normal: ['#ff85c0', '#b37feb', '#597ef7', '#5cdbd3', '#ffa940']
      },//路径颜色
      historyVisible: false,
      showShopInformation: false,//是否显示商铺信息
      passengerFlow: {
        peopleNumber: 0,//人数
        personTime: 0,//人次
        crossShop: 0,//过店
        boy: 0,//男
        girl: 0,//女
        retention: 0,//滞留量
        averageDwellTime: 0,//平均驻留时长
      },
      shopInformation: {
        shopName: '',//店铺名称
        shopCode: '',//店铺编码
        shopFormat: '',//业态
        measureArea: '',//面积
        startTime: '',//租期起始日期
        endTime: '',//租期结束日期
      }
    }
  },
  // components:{DownOutlined},
  mounted() {
    this.fnGetTheColorBasedOnTime();
    //初始化时间，当前时间的前一天。
    this.time = moment(moment().subtract(1, "days").format("YYYY-MM-DD"))
    this.lastTime = this.time.format('YYYY-MM-DD') + ' 00:00:00'
    this.selectTime = moment(moment().subtract(1, "days").format("YYYY-MM-DD"))
    this.$nextTick(() => {
      this.buildingChange(this.buildings[0].code)
    })
    //地图初始化完成监听
    // this.zymap.on('floorChanged', this.afterFloorChange.bind(this))
    // this.zymap.on('unitClick', this.onUnitClick.bind(this))
  },

  methods: {
    buildingChange(value) {
      this.buildingCode = value
      this.socketDestroy()
      this.zymap?.destroy()
      this.zymap = null
      this.getMapInformation(value)
      this.getErect(value)
    },
    /**
     * 获取年龄
     */
    getAge(type) {
      switch (type) {
        case 0:
          return '少年';
        case 1:
          return '青年';
        case 2:
          return '资深青年';
        case 3:
          return '中年';
        case 4:
          return '老年';
      }

    },
    /**
     * 选择时间
     */
    onSelect(value) {
      this.time = value;
      this.lastTime = this.time.format('YYYY-MM-DD') + ' 00:00:00'
      this.lastDataId = '0'
    },
    /**
     * 时间发生变化
     */
    onPanelChange(value) {
      this.time = value;
      this.lastTime = this.time.format('YYYY-MM-DD') + ' 00:00:00'
      this.lastDataId = '0'
    },
    /**
     * 楼层切换
     **/
    handleChange(value) {
      //根据楼层id匹配对应楼层数据
      for (let i = 0; i < this.floors.length; i++) {
        const floor = this.floors[i]
        if (floor.id === value && this.floor.id !== value) {
          this.floor = floor
          if (this.zymap !== null) {
            //切换楼层
            this.zymap.changeFloor(floor.code)
          }
          break;
        }
      }
    },
    onUnitClick(unit) {
      alert(unit.name || unit.id)
    },

    /**
     * 初始化地图
     */
    initMap() {
      let floor = this.floor
      // console.log('floor', floor)
      if (floor.buildingCode && floor.code) {
        //初始化地图
        this.zymap = new zymap.ZYMap({
          serverUrl: 'http://map.malllead.com',
          appId: '10010001',
          appSecret: '4c4jujUBYYs5elZluj42vrVKtuTO9scw',
          buildingCode: floor.buildingCode,
          container: this.$refs.mapContainer,
          floorCode: floor.code,
          viewMode: '2d'
        })
        const ui = new zymap.ZYUI({
          compass: 1, // 指南针 0=不显示 1=显示
          viewMode: 1, // 2d-3d切换
          lang: 0, // 语言切换
          zoom: 1, // 放大缩小
          floor: 0, // 楼层控件
          multiMode: 0 // 单层 多层模式
        })
        ui.addToMap(this.zymap)

        this.zymap.on('floorChanged', this.afterFloorChange.bind(this))
        this.zymap.on('unitClick', this.unitClick.bind(this))
      }

    },
    unitClick(event, unitInfo) {
      console.log('unitClick-event', event, 'unitInfo', unitInfo)
      const unitCode = unitInfo.unitCode
      this.showShopInformation = true
      this.initShopInfo()
      this.getShopFlow(unitCode)
      this.getShopInfo(unitCode)
    },
    /**
     * 楼层切换监听
     */
    afterFloorChange(floorCode) {
      // console.log('楼层初始化完成，code', floorCode)
      this.cleanMapLines()
      this.initParams()
      //当前模式 0-实时，1-历史
      const currentPattern = this.currentPattern
      if (currentPattern === 0) {
        this.getInitMapData()
      }
      if (currentPattern === 1) {
        this.getHistoryData(this.lastTime, this.lastDataId)
      }

    },
    /**
     * 模式发生辩护
     * @param e
     */
    patternChange(e) {
      this.cleanMapLines()
      this.initParams()
      this.historyVisible = false
      const pattern = e.target.value
      this.currentPattern = pattern
      if (pattern === 0) {
        this.getInitMapData()
      }
      if (pattern === 1) {
        this.getHistoryData(this.lastTime, this.lastDataId)
      }
    },
    /**
     * 获取地图基础信息
     */
    getMapInformation(buildingCode) {
      request(`${MAP_INFORMATION}/${buildingCode}`, METHOD.GET, {})
          .then(res => {
            // console.log('地图信息', res)
            const data = res.data
            if (data !== null && data.code === 0 && data.data !== null && data.data.length > 0) {
              this.floors = data.data
              this.floor = data.data[0]
              this.initMap()
            }
          })
    },
    /**
     * 获取建筑信息
     */
    getErect(buildingCode) {
      request(`${ERECT}/${buildingCode}`, METHOD.GET, {})
          .then(res => {
            // console.log('建筑信息', res)
            const data = res.data
            if (data !== null && data.data !== null) {
              const name = data.data.name
              // console.log('建筑名称', name)
              this.buildingName = name
            }
          })
    },
    /**
     * 获取地图初始化数据
     */
    getInitMapData() {
      this.historyLoading = true
      let uid = 10086
      request(INIT_MAP + this.floor.code + `/${uid}`, METHOD.GET, {})
          .then(res => {
            // console.log('地图初始化数据', res)
            if (res.data !== null && res.data.code === 0 && res.data.data !== null) {
              this.pointData = res.data.data
              this.initMapLine(this.pointData)
            }
          })
          .finally(() => {
            this.historyLoading = false
            this.runWebSocket(this.floor.code)
          })
    },
    democlick() {

    },
    /**
     * 添加路径
     * @param data
     */
    initMapLine(data) {
      // console.log('initMapLine', data)
      if (data === null) {
        return
      }
      for (const item of data) {
        let lines = []
        const points = item.points
        const uid = item.userId
        const sex = item.sex
        const age = item.age
        // console.log('points',points.length)
        if (points !== null) {
          for (const point of points) {
            lines.push({
              x: point.offsetX,
              y: point.offsetY,
              z: 100
            })
          }
          //根据性别和年龄显示路径颜色
          // const userColor = this.getUserColor(sex, age)
          // console.log('userColor', userColor, 'sex', sex, 'age', age)
          // 根据时间段显示路径颜色
          const userColor = this.fnGetTheColorBasedOnTime()
          this.drawMapLine(lines, userColor)
        }
      }
    },
    /**
     * 检查路径中是否存在相同的路径
     */
    linesSplice(lines) {
      if (lines === null || lines.length === 0) {
        return
      }
      const startPoint = lines[0]
      for (let i = 1; i < lines.length; i++) {
        const point = lines[i]
        if (point.x === startPoint.x && point.y === startPoint.y) {
          return true
        }
      }
      return false
    },
    /**
     * 画线
     * @param lines
     * @param lineColor
     */
    drawMapLine(lines, lineColor) {
      console.log('drawMapLine', this.zymap)
      if (this.zymap === null) {
        return;
      }
      const line = new zymap.ZYSplineCurveMarker({
        segments: lines,
        width: 2,
        color: lineColor,
        opacity: 1,
        height: 20
      })
      this.pointLines.push(line)
      line.addTo(this.zymap)
    },
    /**
     * 建立长连接
     * @param floorCode
     */
    runWebSocket(floorCode) {
      const that = this
      const uid = 10086
      const ws = new WebSocket(`ws://201ow31656.iok.la:43528/ws/asset/${floorCode}/${uid}/${this.buildingCode}`);
      ws.onopen = function () {
        // console.log('socket onopen')
      };
      ws.onmessage = function (evt) {
        let dataStr = evt.data
        // console.log(dataStr)
        const data = JSON.parse(dataStr);
        // console.log(evt.data)
        if (data !== null && data.code === 0 && this.currentPattern === 0) {
          that.initMapLine(data.data)
        }
      }
      ws.onclose = function () {
        console.log('socket onclose')
      };
      ws.onerror = function (error) {
        console.log('socket onerror')
      };
      this.ws = ws
    },
    /**
     * 查询历史数据
     */
    searchHistoryData() {
      this.selectAge = this.checkAge
      this.selectGender = this.checkGender
      this.selectTime = this.time
      this.cleanMapLines()
      this.historyVisible = false
      this.lastDataId = '0'
      this.lastTime = this.time.format('YYYY-MM-DD') + ' 00:00:00'
      this.getHistoryData(this.lastTime, this.lastDataId)
    },
    /**
     * 获取历史数据
     */
    getHistoryData(lastTime, lastDataId) {
      this.historyLoading = true
      const params = {
        age: this.checkAge.join(','),
        floorId: this.floor.code,
        date: lastTime,
        sex: this.checkGender.join(','),
        lastDataId: lastDataId
      }
      request(HISTORY_MAP, METHOD.POST, params)
          .then(res => {
            // console.log('历史数据', res)
            if (res.data !== null && res.data.code === 0 &&
                res.data.data !== null) {
              const data = res.data.data
              this.pointData.push(data.lines)
              this.initMapLine(data.lines)
              const lastTime = data.lastTime
              const lastDataId = data.lastDataId
              if (this.lastTime !== lastTime || this.lastDataId !== lastDataId) {
                this.lastTime = lastTime
                this.lastDataId = lastDataId
                this.getHistoryData(data.lastTime, data.lastDataId)
              } else {
                this.historyLoading = false
              }

            } else {
              this.historyLoading = false
            }
          })
          .catch(() => {
            this.historyLoading = false
          })
    },
    /**
     * 注销长连接
     */
    socketDestroy() {
      this.ws?.close()
      this.ws = null
    },
    /**
     * 清除历史数据
     */
    cleanMapLines() {
      const pointLines = this.pointLines
      // console.log('pointLines', pointLines)
      if (pointLines != null) {
        for (const pointLine of pointLines) {
          pointLine.remove()
        }
        this.pointLines = []
      }
    },
    /**
     * 根据UID获取用户路径颜色
     * @param sex
     * @param age
     */
    getUserColor: function (sex, age) {
      let colors;
      if (sex === 0) {
        colors = this.colors.boy
      } else if (sex === 1) {
        colors = this.colors.girl
      } else {
        colors = this.colors.normal
      }
      const ageType = this.ageType
      let color = colors[0]
      for (let i = 0; i < ageType.length; i++) {
        const type = ageType[i]
        const min = type.min
        const max = type.max
        // console.log('min',min,'max',max)
        if (i === 0 && age <= max) {
          // console.log('1')
          color = colors[i]
          break
        } else if (i === ageType.length - 1 && age >= min) {
          // console.log('2')
          color = colors[i]
          break
        } else if (age >= min && age <= max) {
          // console.log('3')
          color = colors[i]
          break
        }
      }
      return color
    },

    /**
     * 随机指定范围整数
     * @param min
     * @param max
     * @returns {number}
     */
    getRandom(min, max) {
      min = Math.ceil(min);
      max = Math.floor(max);
      return Math.floor(Math.random() * (max - min + 1)) + min;
    },
    /**
     * 初始化参数
     */
    initParams() {
      this.socketDestroy()
      this.pointData = []
      this.checkGender = [0, 1]
      this.checkAge = [0, 1, 2, 3, 4]
      this.time = moment(moment().subtract(1, "days").format("YYYY-MM-DD"))
      this.lastDataId = '0'
      this.lastTime = this.time.format('YYYY-MM-DD') + ' 00:00:00'
    },
    /**
     * 获取客流信息
     * @param shopCode
     */
    getShopFlow(shopCode) {
      request(SHOP_FLOW, METHOD.POST, {date: moment().format('YY-MM-DD'), shopCode})
          .then(res => {
            console.log('客流信息', res)
            if (res.data.code === 0 && res.data.data !== null) {
              const data = res.data.data
              this.passengerFlow = {
                peopleNumber: data.visitors,//人数
                personTime: data.trips,//人次
                crossShop: data.pastStore,//过店
                boy: data.malePct,//男
                girl: data.femalePct,//女
                retention: data.stayTrips,//滞留量
                averageDwellTime: data.avgStayTime,//平均驻留时长
              }
            }

          })
    },
    /**
     * 获取店铺信息
     * @param shopCode
     */
    getShopInfo(shopCode) {
      request(SHOP_INFO + shopCode, METHOD.GET, {})
          .then(res => {
            console.log('店铺信息', res)
            if (res.data.code === 0 && res.data.data !== null) {
              const data = res.data.data
              this.shopInformation = {
                shopName: data.shopName,//店铺名称
                shopCode: data.relCode,//店铺编码
                shopFormat: data.tagName1,//业态
                measureArea: data.space,//面积
                startTime: data.leaseStartDate,//租期起始日期
                endTime: data.leaseEndDate,//租期结束日期
              }
            }

          })
    },
    /**
     * 初始化店铺信息
     */
    initShopInfo() {
      this.shopInformation = {
        shopName: '',//店铺名称
        shopCode: '',//店铺编码
        shopFormat: '',//业态
        measureArea: '',//面积
        startTime: '',//租期起始日期
        endTime: '',//租期结束日期
      }
      this.passengerFlow = {
        peopleNumber: 0,//人数
        personTime: 0,//人次
        crossShop: 0,//过店
        boy: 0,//男
        girl: 0,//女
        retention: 0,//滞留量
        averageDwellTime: 0,//平均驻留时长
      }
    },
    /**
     * 隐藏店铺信息
     */
    hideShopInfo() {
      if (this.showShopInformation) {
        this.showShopInformation = false
      }
    },
    /**
     * 根据当前时间获取颜色
     */
    fnGetTheColorBasedOnTime() {
      const currentTime = moment().format('k') - 10
      const timeColors = this.timeColors;
      console.log('currentTime', currentTime);
      switch (currentTime) {
        case currentTime < 2:
          return timeColors[0];
        case  currentTime >= 2 && currentTime <= 4:
          return timeColors[1];
        case  currentTime >= 4 && currentTime <= 6:
          return timeColors[2];
        case  currentTime >= 6 && currentTime <= 8:
          return timeColors[3];
        case  currentTime >= 8 && currentTime <= 10:
          return timeColors[4];
        case  currentTime >= 10 && currentTime <= 12:
          return timeColors[5];
        case  currentTime > 12:
          return timeColors[6];
      }

    },
  },

  beforeDestroy() {
    this.socketDestroy()
    this.zymap?.destroy()
    this.zymap = null

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
html, body {
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0 !important;
  position: relative;
  overflow: hidden;
}

#container {
  width: 100vw;
  height: 100vh;
  position: relative;
  box-sizing: border-box;
  display: flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-flex;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  overflow: hidden;
  padding: 20px;

  .column-header {
    width: 100%;
    height: 57px;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    background: #f8f8f8; //#1d293e
    display: flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-flex;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    align-items: center;
    justify-content: space-between;
    position: relative;

    span {
      size: 14px;
      color: #ffffff;
    }

    .btns {
      height: 100%;
      display: flex;
      display: -moz-flex;
      display: -ms-flex;
      display: -o-flex;
      display: -webkit-flex;
      flex-direction: row;
      -ms-flex-direction: row;
      -webkit-flex-direction: row;
      align-items: center;
      justify-content: center;
    }
  }

  .content {
    width: calc(100vw - 40px);
    height: 100%;
    flex-shrink: 1;
    position: relative;
    box-sizing: border-box;
  }
}

.confirm-btn {
  width: 100%;
  display: flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: -webkit-flex;
  flex-direction: row;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  align-items: end;
  justify-content: flex-end;
}

.params {
  height: 40px;
  text-align: left;
  line-height: 40px;
  padding: 0 15px;
  border-radius: 5px;
  border: 1px solid #d9d9d9;
  color: #515a6e;
  font-size: 14px;
  cursor: pointer;

  span {
    color: #515a6e !important;
  }
}

/deep/ .ant-fullcalendar-header {
  text-align: left !important;
}

/deep/ .ant-fullcalendar-header .ant-radio-group {
  display: none !important;
}

.btns {
  /deep/ .ant-select-selection--single {
    height: 40px !important;
  }

  /deep/ .ant-select-selection__rendered {
    line-height: 40px !important;
  }

  /deep/ .ant-select-selection-selected-value {
    color: #515a6e !important;
  }

  /deep/ .ant-select-arrow {
    color: #515a6e !important;
  }

  /deep/ .ant-select-selection {
    background-color: transparent !important;
  }
}

#shop-information {
  width: min-content;
  width: -moz-min-content;
  height: min-content;
  padding: 20px;
  background-color: white;
  position: fixed;
  top: -50%;
  bottom: -50%;
  margin: auto;
  right: 20px;
  z-index: 1000;
  box-sizing: border-box;
  box-shadow: 0px 0px 20px #d9d9d9;
}
</style>
